<template>
    <el-dialog
      :model-value="dialogVisible"
      title="修改题目信息"
      width="500"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="form"
        label-width="70px"
        @submit.prevent="handleConfirm"
      >
        <el-form-item label="题目序号" >
          <!-- <el-input v-model="form.id" :span="8" /> -->
           <span>{{form.id}}</span>
        </el-form-item>
        <el-form-item label="题目内容">
          <el-input placeholder="Please input" v-model="form.content" :span="8"></el-input>
        </el-form-item>
        <el-form-item label="答案">
          <el-input v-model="form.answer" :span="8"/>
        </el-form-item><el-form-item label="标签">
          <el-input v-model="form.tag" :span="8" />
        </el-form-item>
        <el-form-item label="选项一">
          <el-input v-model="form.option1" :span="8" />
        </el-form-item>
        <el-form-item label="选项二">
          <el-input v-model="form.option2" :span="8" />
        </el-form-item>
        <el-form-item label="选项三">
          <el-input v-model="form.option3" :span="8" />
        </el-form-item>
        <el-form-item label="选项四">
          <el-input v-model="form.option4" :span="8" />
        </el-form-item>
        <el-form-item style="margin-left: -68px">
        </el-form-item>
        <el-text class="mx-1" type="info">
          修改时间：{{ formatDateTime(new Date()) }}
        </el-text>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { defineEmits, ref, reactive } from 'vue'
  import { formatDateTime } from '@/utils/formatDate'
  import {type Question,updateLeveQuestionBankById} from '@/api/test/wirttenTest.ts'
import $bus from '@/bus'
  
  const dialogVisible = ref(false)
  let form = reactive<Question>({
    id:'',
    content: '',
	answer: '',
	tag: '',
	option1: '',
	option2: '',
	option3: '',
	option4: '',
})

  $bus.on('sendQuestionInfo', ({ row }) => {
    form=row
	})
  
  const formRef = ref(null)
  const emits = defineEmits(['update:modelValue', 'form-submitted'])
  
  const handleConfirm = () => {
    console.log('form')
    updateLeveQuestionBankById(form.id,form)
    console.log(form)
    handleClose()
  }
  const handleClose = () => {
    emits('update:modelValue', false)
  }
  </script>
  <style>
  .el-input {
    width: 398px;
    height: 30px;
  }
  .el-select{
    width: 398px;
    height: 30px;
  }
  </style>